<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <span>span1</span>
      <span>span2</span>
      <span>span3</span>
    </div>

    <button class="add">添加节点</button>
    <button class="del">删除节点</button>
    <script>
      document.querySelector('.add').addEventListener('click', function () {
        // 添加节点- 创建 a 标签
        const a = document.createElement('a')

        // 设置内容
        // a.innerHTML = '🥦🥚'
        a.innerHTML = '🥦🍅'
        a.href = 'https://www.baidu.com'

        // 创建完毕的节点，还没有添加到页面上，需要调用 append
        const body = document.querySelector('body')

        // 在指定元素的末尾添加
        // body.append(a)

        // 开头添加
        body.prepend(a)
      })

      // 选择器用的不是标签选择器，无法推断出是什么标签
      // 可能没有提示
      document.querySelector('.del').addEventListener('click', function () {
        // 自己删掉自己
        // this.remove()
        // document.querySelector('body').remove()
        // 找到 所有 span，一个一个删掉
        const spanArr = document.querySelectorAll('span')
        // spanArr.forEach(item => {
        //   item.remove()
        // })

        // 每隔一秒钟，删掉一个
        spanArr.forEach((item, index) => {
          // console.log(index)
          // item.remove()
          setTimeout(() => {
            item.remove()
          }, (index + 1) * 1000)
        })
      })
    </script>
  </body>
</html>
